<template>
	<view class="list">
		<musicHead title="歌单" :icon="true" color="#fff"></musicHead>
		<view class="bgimg" :style="{'background-image':'url('+msg.list.coverImgUrl+')'}"></view>
		<view class="container">
			<scroll-view scroll-y="true" >
				<view class="list-head">
					<!-- 左侧 -->
					<view class="list-head-left">
						<image :src="msg.list.coverImgUrl" mode=""></image>
						<svg class="icon" aria-hidden="true" @tap="handleToback">
						    <use xlink:href="#icon-bofang"></use>
						</svg>
						<text class="bf">播放量</text>
						<text class="num">{{changeCount(msg.list.playCount)}}</text>
					</view>
					<!-- 右侧 -->
					<view class="list-head-right">
						<!-- top -->
						<view class="top">{{msg.list.name}}</view>
						<!-- center -->
						<view class="center">
							<view class="">
								<image src="../../static/wyy.jpeg" mode=""></image>
							</view>
							<view class="wyy">网易云音乐</view>
						</view>
						<!-- bottom -->
						<view class="bottom">
							<view class="texts">{{msg.list.description}}</view>
							<view class="gt">&gt;</view>
						</view>
					</view>
				</view>
				<!-- 分享功能 -->
				<!-- 条件编译，差异化对待，只在wx小程序里面显示分享功能MP-WEIXIN -->
				<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="list-share">
							<svg class="icon" aria-hidden="true" @tap="handleToback">
								<use xlink:href="#icon-fenxiang1"></use>
							</svg>
							<text>分享给微信好友</text>
					</button>
				<!-- #endif -->
				<!-- 歌单 -->
				<view class="list-gedan">
					<!-- head -->
					<view class="list-gedan-head">
						<svg class="icon" aria-hidden="true" @tap="handleToback">
							<use xlink:href="#icon-bofang-copy"></use>
						</svg>
						<text class="alls">播放全部</text>
						<!-- <text class="add">(共{{(msg.list.tracks).length}}首)</text> -->
					</view>
					<!-- 歌单列表 -->
					<view @tap="handleToDetail(item.id)" class="list-gedan-item" v-for="(item ,index) in msg.list.tracks" :key="index">
						<view class="list-gedan-item-left">{{index+1}}</view>
						<view class="list-gedan-item-center">
							<view class="name">{{item.name}}</view>
							<view class="geming">
								<image src="../../static/sq.png" mode=""></image>
								<view class="geshou">{{item.ar[0].name}}--{{item.name}}</view>
							</view>
						</view>
						<view class="list-gedan-item-right">
							<svg class="icon" aria-hidden="true" @tap="handleToback">
								<use xlink:href="#icon-bofang-copy"></use>
							</svg>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import musicHead from '../../components/musicHead/musicHead.vue'
import { onLoad } from '@dcloudio/uni-app';
import {list} from '../../api/index.js'
import { reactive, onMounted } from 'vue'
const msg = reactive({
	list:[]
})
const handleToDetail = (songsid)=>{
	uni.navigateTo({
		url: '/pages/detail/detail?songsid='+songsid,
	});
}
  // 数字转换、定义函数
        function changeCount(num) { 
                    if (num>=100000000) {
                        // 保留小数点后面0位
                        return (num/100000000).toFixed(2) + '亿'
                    }else if (num>=10000 && num<100000000) {
                        return (num/10000).toFixed(2) + '万'
                    }
        }
	// 接收index里面传过来的id
onLoad( async (option) => {	//这里可以接收到一个参数option
  uni.showLoading({
  	title: '正在加载中......'
  })
    console.log(option.listId)
	// 从接口获取数据
	await list(option.listId).then((res)=>{
			console.log(res)
			msg.list = res.data.playlist;
			uni.hideLoading()
			// console.log(msg.list)
		})
			
  })
</script>

<style scoped>
	/* 头部 */
	.list-head{
		display: flex;
		margin: 30rpx 30rpx;
	}
	.list-head-left{
		width: 264rpx;
		height: 264rpx;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		margin-right: 42rpx;
	}
	.list-head-left .icon{
		position: absolute;
		right: 210rpx;
	}
	.list-head-left image{
		width: 100%;
		height: 100%;
	}
	.list-head-left .bf{
		position: absolute;
		right: 126rpx;
		top: 8rpx;
		color: #fff;
		font-size: 26rpx;
	}
	.list-head-left .num{
		position: absolute;
		right: 8rpx;
		top: 8rpx;
		color: #fff;
		font-size: 26rpx;
	}
	.list-head-right{
		color: #f0f2f7;
		width: 380rpx;
	}
	.list-head-right .top{
		color: #fff;
		font-size: 34rpx;
		
	}
	.list-head-right .center{
		display: flex;
		margin:  20rpx 0;
		font-size: 24rpx;
	}
	.list-head-right .center .wyy{
		line-height: 56rpx;
	}
	.list-head-right .center image{
		border-radius: 50%;
		width: 54rpx;
		height: 54rpx;
		margin-right: 16rpx;
	}
	.list-head-right .bottom{
		line-height: 34rpx;
		display: flex;
		font-size: 22rpx;
		position: relative;
	}
	.list-head-right .bottom .texts{
		overflow: hidden;
		display: -webkit-box;
		/* 允许换两行 */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow:ellipsis;
		width: 380rpx;
	}
	.list-head-right .bottom .gt{
		position: absolute;
		right: 0px;
		bottom: 0px;
	}
	.list-share{
		margin: 0 auto;
		width: 330rpx;
		line-height: 74rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 30rpx;
		color: #fff;
		font-size: 28rpx;
		align-items: center;
		text-align: center;
	}
	.icon{
		fill: white;
		transform: translateY(5px);
	}
	.list-share text{
		margin-left: 16rpx;
	}
	.list-gedan{
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		margin-top: 40rpx;
		overflow: hidden;
	}
	.list-gedan-head{
		line-height: 50rpx;
		margin-top: 30rpx;
		margin-left: 46rpx;
		margin-bottom: 30rpx;
	}
	.list-gedan-head .icon{
		height: 50rpx;
		width: 50rpx;
		margin-right: 20rpx;
		fill: #ccc;
	}
	.list-gedan-head .alls{
		font-size: 30rpx;
		margin-right: 14rpx;
	}
	.list-gedan-head .add{
		font-size: 26rpx;
		color: #b2b2b2;
	}
	.list-gedan-item{
		display: flex;
		margin: 0 50rpx 60rpx 46rpx;
		align-items: center;
		color: #959595;
		
	}
	.list-gedan-item-left{
		width: 58rpx;
		font-size: 30rpx;
		line-height: 50rpx;
	}
	.list-gedan-item-center{
		/* 剩下的占满整个空间 */
		flex: 1;
	}
	.list-gedan-item-center image{
		width: 32rpx;
		height: 20rpx;
		margin-right: 10rpx;
		transform: translateY(8px);
	}
	.list-gedan-item-center .geming{
		display: flex;
	}
	.list-gedan-item-center .name{
		font-size: 28rpx;
		color: black;
	}
	.list-gedan-item-center .geshou{
		font-size: 20rpx;
		line-height: 50rpx;
	}
	.list-gedan-item-right .icon{
		width: 50rpx;
		height: 50rpx;
		fill: red;
	}
</style>
